<template>
  <div class="Onlinecomplaint" ref="homePage">
    <div class="bj">
      <van-nav-bar title="投诉进度" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <p class="schedule_txt">投诉{{datalist.ForObject}}</p>
    <div class="schedule_box">
      <p><span class="lb">投诉时间：</span>{{datalist.CreateDate}}</p>
      <p><span class="lb">事发地：</span>{{datalist.City}}</p>
      <p><span class="lb">投诉对象：</span>{{datalist.ForObject}}</p>
      <p><span class="lb">投诉原因：</span> <span style=" width:80%;">{{datalist.Content}}</span></p>
    </div>
    <div class="schedule_img">
      <img v-for="(data,index) in datalist.Imgs" :key="index" :src="data" />
    </div>
    <div class="dealwith">
      <p>处理进度</p>
      <van-steps :active="active" active-color="#46d0ca" active-icon="success">
        <van-step>
          <div class="chuli">
            <span>{{datalist.CreateDate}}</span>
            <span>投诉申请</span>
          </div>
        </van-step>
        <van-step>
          <div class="chuli" style="margin-top: 25px;margin-left: -50px;">
            <span>受理中</span>
            <span>{{datalist.BeginDealDate}}</span>
          </div>
        </van-step>
        <van-step>
          <div class="chuli" style="margin-left: -50px;">
            <span>{{datalist.FinishDealDate}}</span>
            <span>受理完成</span>
          </div>
        </van-step>
        <van-step>
          <div class="chuli" style="margin-top: 25px;margin-left: -90px;">
            <span>受理结果评分</span>
            <span></span>
          </div>
        </van-step>
      </van-steps>
    </div>
    <div class="xing" v-if="active == 3 || active == 2">
      <span>对本次处理结果评分</span>
      <van-rate v-model="xing" @change="changeScore" icon="like" :disabled="disabled" disabled-color="#46d0ca" void-icon="like-o" />
    </div>
    <div class="schedule_box">
      <span>用户投诉申请：{{datalist.CreateDate}}</span>
      <span>工作人员受理中：{{datalist.BeginDealDate}}</span>
    </div>
    <div class="schedule_phone">
      <a style="display: flex;align-items: center;" href="tel:075526476789">
        <van-icon name="phone" />
        <span style="color: #5c5c5c;">电话联系</span>
      </a>

    </div>
  </div>
</template>

<script>
// import Swiper from 'swiper';
// import 'swiper/dist/css/swiper.min.css';
// import { Toast } from 'toast'
import {
  MessageBoardDo,
  MessageBoardDetails
} from '@/api/home.js'
export default {

  data () {
    return {
      clintHeigth: '', // 获取页面高度
      active: 0, // 处理进度
      datalist: {},
      xing: 0, // 评分
      disabled: false
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    this.MessageBoardDetails()
  },
  methods: {
    changeScore () {
      let data = {
        'DoType': 'Evaluate',
        'mbSN': this.$route.query.mbSN,
        'Score': this.xing
      }
      console.log(data)
      MessageBoardDo(data).then(res => {
        if (res.Code === 0) {
          this.disabled = true
          this.$toast('提交成功')
          window.location.reload()
        }
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    Complaint () {
      this.$router.push({
        path: '/Complaint/OnlineUpload'
      })
    },
    MessageBoardDetails () {
      let data = {
        'mbSN': this.$route.query.mbSN
      }
      MessageBoardDetails(data).then(res => {
        console.log(res)
        this.active = res.Item.Status
        this.datalist = res.Item
        this.xing = res.Item.Score

        if (res.Item.Score > 0) {
          this.active = 3
          this.disabled = true
        } else {
          this.active = 2
          this.disabled = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.Onlinecomplaint {
  background: white;

  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .van-steps--horizontal {
    padding: 20px 10px 40px !important;
    margin-top: 10px;

    .chuli {
      width: 100px;
      display: flex;
      flex-direction: column;
      position: absolute;
      z-index: 9;
      margin-top: -33px;
      justify-content: center;
      align-items: center;
    }
  }
  .xing {
    width: 90%;
    margin: 0 auto;
    span {
      margin-bottom: 10px;
      font-size: 14px;
    }
    .van-rate {
      height: 40px;
      line-height: 20px;
      margin-top: 5px;
    }
  }

  .schedule_txt {
    padding: 20px;
    font-size: 18px;
    text-align: center;
  }

  .schedule_box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 400;

    p {
      display: flex;
      word-break: break-all;
      text-overflow: ellipsis;
      span.lb {
        flex-basis: 60px;
        justify-content: space-between;
      }
    }
  }

  .schedule_img {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 20px;

    img {
      width: 80px;
      height: 100px;
      padding: 5px 10px;
      // margin: 0 10px;
    }
  }

  .dealwith {
    margin-top: 20px;

    p {
      text-align: center;
      font-size: 16px;
    }
  }

  .schedule_phone {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
}
</style>
